<template>
	<!-- 下拉框 -->
    <div class="proup" id="checkboxPP">
      <v-probox-common v-model="rel.property" :tips="false"></v-probox-common>
      <hr>
      <div class="ptem">
        <div class="i3d6">
          <strong>选项内容</strong>
        </div>
        <div class="i3d6 tar">
          <a class="" v-on:click="multi_click">批量编辑</a>
        </div>
      </div>
      <v-probox-option-editor v-model="rel.property.options"></v-probox-option-editor>
      <v-probox-multi-option-editor :optionValue="optionValue" :show="showMultiEditor" v-on:close-editor="closeEditor" v-on:say-options="sayOptions"></v-probox-multi-option-editor>
      <hr>
      <v-probox-layout v-model="rel.property"></v-probox-layout>
    </div>
    <!-- /下拉框 -->
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxLayout from './libs/pro-box-layout'
import proboxOptionEditor from './libs/pro-box-option-editor'
import proboxMultiOptionEditor from './libs/pro-box-multi-editor'

export default{
  props:["rel"],
  components:{
    'v-probox-layout':proboxLayout,
    'v-probox-common':proboxCommon,
    'v-probox-option-editor':proboxOptionEditor,
    'v-probox-multi-option-editor':proboxMultiOptionEditor
  },
  data:function(){
    return {
      showMultiEditor:false,
      optionValue:''
    }
  },
  methods:{
    sayOptions:function(value){
      this.rel.property.options=value
    },
    closeEditor:function(close){
      this.showMultiEditor=close
    },
    multi_click:function(){
      this.optionValue = ''
      for(var i=0;i<this.rel.property.options.length;i++){
        if(i>0){
          this.optionValue += '\n'
        }
        this.optionValue += this.rel.property.options[i].label
      }
      console.info(this.optionValue)
      this.showMultiEditor=true
    }
  }
}
</script>

<style>
</style>
